/**
 * 个人页面交互脚本
 * 优化性能的同时保持良好的用户体验
 */

// DOM 元素缓存 - 避免重复查询
const DOM = {
  menuButton: document.querySelector('.menu-button'),
  mobileMenu: document.querySelector('.mobile-menu'),
  navLinks: document.querySelectorAll('a[href^="#"]'),
  projectsGrid: document.querySelector('.projects-grid')
};

/**
 * 工具函数：滚动节流
 * @param {Function} func - 需要节流的函数
 * @param {number} wait - 节流时间间隔（毫秒）
 * @returns {Function} - 节流后的函数
 */
function throttle(func, wait) {
  let timeout;
  
  return function() {
    const context = this;
    const args = arguments;
    
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(context, args);
        timeout = null;
      }, wait);
    }
  };
}

/**
 * 移动端菜单切换功能
 * 控制移动设备上菜单的显示与隐藏
 */
function initMobileMenu() {
  if (!DOM.menuButton || !DOM.mobileMenu) return;
  
  DOM.menuButton.addEventListener('click', () => {
    DOM.mobileMenu.style.display = DOM.mobileMenu.style.display === 'flex' ? 'none' : 'flex';
  });
}

/**
 * 初始化平滑滚动功能
 * 为所有内部锚点链接添加平滑滚动效果
 */
function initSmoothScroll() {
  if (DOM.navLinks.length === 0) return;
  
  DOM.navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 只处理有效的内部锚点链接
      const targetId = this.getAttribute('href');
      
      if (targetId && targetId !== '#') {
        e.preventDefault();
        
        const targetElement = document.querySelector(targetId);
        
        if (targetElement) {
          // 使用 requestAnimationFrame 优化滚动性能
          requestAnimationFrame(() => {
            window.scrollTo({
              top: targetElement.offsetTop - 60, // 考虑导航栏高度
              behavior: 'smooth'
            });
          });
        }
      }
      
      // 移动设备上点击链接后关闭菜单
      if (DOM.mobileMenu && window.innerWidth < 768) {
        DOM.mobileMenu.style.display = 'none';
      }
    });
  });
}

/**
 * 图片懒加载功能
 * 当图片进入视口时才加载图片资源
 */
function lazyLoadImages() {
  const lazyImages = document.querySelectorAll('img[loading="lazy"]');
  
  lazyImages.forEach(img => {
    const imgTop = img.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;
    
    // 图片进入视口前 100px 开始加载
    if (imgTop < windowHeight + 100) {
      // 从 data-src 属性获取真实图片地址
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      }
      
      // 加载完成后移除 loading 属性
      img.removeAttribute('loading');
    }
  });
}

/**
 * 初始化项目卡片交互效果
 * 为项目卡片添加悬停动画效果
 */
function initProjectCards() {
  if (!DOM.projectsGrid) return;
  
  const projectCards = DOM.projectsGrid.querySelectorAll('.project-card');
  
  projectCards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      card.style.transform = 'translateY(-5px)';
    });
    
    card.addEventListener('mouseleave', () => {
      card.style.transform = 'translateY(0)';
    });
  });
}

/**
 * 响应窗口大小变化
 * 处理不同屏幕尺寸下的布局调整
 */
function handleResize() {
  // 在桌面视图下确保移动菜单关闭
  if (DOM.mobileMenu && window.innerWidth >= 768) {
    DOM.mobileMenu.style.display = 'none';
  }
  
  // 响应式网格布局调整
  if (DOM.projectsGrid) {
    // 根据屏幕宽度确定网格列数
    const columns = window.innerWidth >= 1024 ? 3 : 
                    window.innerWidth >= 768 ? 2 : 1;
    
    DOM.projectsGrid.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
  }
}

/**
 * 页面可见性变化处理
 * 当页面在后台/前台切换时优化性能
 */
function initVisibilityHandling() {
  if ('visibilityState' in document) {
    document.addEventListener('visibilitychange', () => {
      const isVisible = document.visibilityState === 'visible';
      
      // 页面重新可见时执行懒加载
      if (isVisible) {
        lazyLoadImages();
      }
    });
  }
}

/**
 * 初始化所有功能
 * 页面加载完成后执行的主函数
 */
function init() {
  // 基础功能初始化
  initMobileMenu();
  initSmoothScroll();
  initProjectCards();
  initVisibilityHandling();
  
  // 初始化响应式布局
  handleResize();
  
  // 立即执行一次懒加载
  lazyLoadImages();
  
  // 注册事件监听器
  window.addEventListener('scroll', throttle(lazyLoadImages, 200));
  window.addEventListener('resize', throttle(handleResize, 100));
  
  // 延迟加载非关键资源
  setTimeout(() => {
    // 此处可添加统计分析、可选功能等非关键代码
    // 例如: loadAnalytics(), initOptionalFeatures()
  }, 2000);
}

// 等待页面加载完成后初始化
window.addEventListener('load', init);